<!--全文属性查询-->

<template>
  <div>
    <FunctionlUnitFrame @closePane="closePane">
      <template slot="title">全文属性查询</template>
      <template slot="content">
        <el-container>
          <el-main>
            <el-form :inline="true" :model="formPro" class="demo-form-inline">
              <el-form-item label="">
                <el-select v-model="formPro.pro" placeholder="属性">
                  <el-option label="属性1" value="shanghai"></el-option>
                  <el-option label="属性2" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="">
                <el-select v-model="formPro.operator" placeholder="操作符">
                  <el-option label="等于" value="="></el-option>
                  <el-option label="不等于" value="<>"></el-option>
                  <el-option label="大于等于" value=">="></el-option>
                  <el-option label="小于等于" value="<="></el-option>
                  <el-option label="包含" value="like"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="formPro.where"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="tableData2" style="width: 100%">
              <el-table-column prop="pro1" label="属性1" width="180"> </el-table-column>
              <el-table-column prop="pro2" label="属性2" width="180"> </el-table-column>
              <el-table-column prop="pro3" label="属性3"></el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </template>
    </FunctionlUnitFrame>
  </div>
</template>

<script>
  import FunctionlUnitFrame from '@/components/FunctionalUnit/FunctionlUnitFrame'
  export default {
    name: "PropertySel",
    components:{
      'FunctionlUnitFrame':FunctionlUnitFrame
    },
    data(){
      return{
        formPro: {
          pro: '',
          operator: '',
          where:''
        },
        tableData2: [{
          pro1: '属性1',
          pro2: '属性2',
          pro3: '属性3',
        }, {
          pro1: '属性1',
          pro2: '属性2',
          pro3: '属性3'
        }, {
          pro1: '属性1',
          pro2: '属性2',
          pro3: '属性3',
        }, {
          pro1: '属性1',
          pro2: '属性2',
          pro3: '属性3'
        }]
      }
    },
    methods:{
      closePane(){
        this.$emit('closePane',false);
      },
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .layerpanel{
    width: 770px;
  }

  @media screen and (max-width: 500px) {
    .layerpanel{
      width: 350px;
      font-size: 12px;
      top: 60px;
    }
  }
</style>
